<!-- 订单列表: src/views/member/order/OrderListPage.vue -->
<script setup lang="ts">
import { orderStatus } from "@/contants/orderStatus";
import XtxTabs from "@/components/XtxTabs";
import XtxTabPane from "@/components/XtxTabPane";
import { useOrderStore } from "@/stores/orderStore";
import type { OrderState } from "@/types/Order";
// 默认激活的订单状态名称
const name = ref("all");

//获取用于存储订单信息的store对象
const orderStore = useOrderStore();
//请求订单列表的参数
const reqParams = ref<{ orderState: OrderState }>({
  orderState: 0,
});
//当请求参数变化后重新获取订单列表
watchEffect(() => orderStore.getMyorderList(1, 10, reqParams.value.orderState));
//获取取消组件
const cancelOrderInstance = ref();
function onCancelOrder(id: string) {
  //弹出取消框
  cancelOrderInstance.value.visible = true;
  //把取消订单的id传递过去
  cancelOrderInstance.value.orderId = id;
}
//重新获取
function onCancelOrderSuccess() {
  orderStore.getMyorderList(1, 10, reqParams.value.orderState);
}
// 物流信息弹框实例对象
const orderLogisticsInstance = ref();
//查看物流
function viewLogistics(id: string) {
  //显示弹框
  orderLogisticsInstance.value.visible = true;
  //发送请求获取物流数据
  orderStore.viewLogistics(id);
}
</script>
<template>
  <div class="member-order">
    <XtxTabs v-model:name="name" @onTabClicked="reqParams.orderState = $event">
      <XtxTabPane
        v-for="item in orderStatus"
        :label="item.label"
        :name="item.name"
        :key="item.name"
      >
        <!-- 此处布局作为 XtxTabPane 组件的插槽  -->
        <div class="order-list">
          <div
            class="loading"
            v-if="
              orderStore.myOrderList[reqParams.orderState].status === 'loading'
            "
          ></div>
          <div
            class="none"
            v-if="
              orderStore.myOrderList[reqParams.orderState].result.items
                ?.length === 0
            "
          >
            暂无数据
          </div>
          <OrderItem
            :item="order"
            v-for="order in orderStore.myOrderList[reqParams.orderState].result
              .items"
            :key="order.id"
            @onCancelOrder="onCancelOrder"
            @remove-order-success="onCancelOrderSuccess"
            @confirm-receipt-goods-success="onCancelOrderSuccess"
            @view-logistics="viewLogistics"
          ></OrderItem>
        </div>
      </XtxTabPane>
    </XtxTabs>
    <!-- 取消订单弹框 -->
    <CancelOrder
      @onCancelOrderSuccess="onCancelOrderSuccess"
      ref="cancelOrderInstance"
    />
    <!-- 物流信息弹框 -->
    <OrderLogistics ref="orderLogisticsInstance" />
  </div>
</template>
<style lang="less" scoped>
.member-order {
  height: 100%;
  background: #fff;
  position: relative;
}
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  .loading {
    height: calc(100% - 60px);
    width: 100%;
    min-height: 400px;
    position: absolute;
    left: 0;
    top: 60px;
    background: rgba(255, 255, 255, 0.9) url(@/assets/images/loading.gif)
      no-repeat center 18%;
  }
  .none {
    height: 400px;
    text-align: center;
    line-height: 400px;
    color: #999;
    background: rgba(255, 255, 255, 0.9);
  }
}
</style>
